<script lang="ts">
import { ref } from 'vue';

export default {
  name: 'Drawer',
  setup() {
    const myDrawerRef = ref();
    const visible = ref(false);

    // 打开
    const open = () => {
      visible.value = true;
      myDrawerRef.value.showModal();
    };

    // 关闭
    const close = async () => {
      visible.value = false;
      const timer = setTimeout(() => {
        myDrawerRef.value.close();
        clearInterval(timer);
      }, 300);
    };

    return {
      myDrawerRef,
      visible,
      open,
      close
    };
  }
};
</script>

<template>
  <transition name="drawer">
    <dialog v-show="visible" ref="myDrawerRef" class="my-drawer">
      <slot></slot>
    </dialog>
  </transition>
</template>

<style lang="scss">
.my-drawer {
  height: 100vh;
  border: none;
  border-radius: 6px 0 0 6px;
  background-color: #ffffff;
  box-shadow: 0 0 16px -6px rgba(0, 0, 0, 0.4);
  outline: none;
  margin-left: auto;
  margin-right: 10px;

  // 遮罩层
  &::backdrop {
    display: none;
  }
}
</style>
